<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-flex.css" />
    <link rel="stylesheet" type="text/css" href="../css/swiper.min.css" />
    <style>
        .aui-bar-nav {
            background-color: rgba(0, 0, 0, 0.0);
            color: #333;
        }

        .topfixed {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;
        }

        .aui-bg-737373 {
            background-color: #737373;
        }

        .aui-title span {
            margin-left: 10px;
        }

        .aui-title .active {
            border-bottom: 3px solid #CD2626;
        }

        .aui-text-color-CD2626 {
            color: #CD2626 !important;
            font-weight: bolder;
            font-size: 1.1rem;
        }

        .aui-coupon {
            font-size: 20px;
            height: 60px;
            width: 70%;
            color: #fff;
            text-align: center;
            vertical-align: bottom;
        }

        .aui-time {
            height: 30px;
            width: 70%;
            float: left;
            text-align: center;
            font-size: 12px;
            color: #fff;
            line-height: 20px;
        }

        #tuijian {
            border-top: 5px solid #EDEDED;
            overflow: hidden;
            margin-bottom: 50px;
        }

        #tuijian img {
            border-radius: 5px;
        }

        #goodpics {
            border-top: 5px solid #ededed;
        }

        .swiper-pagination-bullet-active {
            color: #fff;
            background: #FF1493;
        }

        .bgimg {
            width: 100%;
            background: url(../image/loads.gif) no-repeat center center;
            background-size: contain;
        }

        .shopinfo {
            width: 80px;
            height: 24px;
            background: -webkit-linear-gradient(left, #fa5583, #fd8762);
            font-size: 12px;
            color: #fff;
            line-height: 24px;
            text-align: center;
            border-radius: 14px;
        }
    </style>
</head>

<body>
    <header class="aui-bar aui-bar-nav  topfixed" id="aui-header">
        <a class="aui-btn aui-pull-left" tapmode onclick="closeWin()">
            <span id="aui-icon-left" class="aui-iconfont aui-icon-left" style="background-color:#737373;width:28px;height:28px;line-height:28px;border-radius:50%;-webkit-border-radius:50%;border:1px solid #666"></span>
        </a>
        <div class="aui-title" id="aui-title" style="display:none">
            <span class="active" id="sp" tapmode onclick="goto('gooddetail')">商品</span>
            <span id="xq" tapmode onclick="goto('goodpics')">详情</span>
            <span id="tj" tapmode onclick="goto('tuijian')">推荐</span>
        </div>
        <a class="aui-pull-right aui-btn" tapmode onclick="openWinto('collection_win','widget://html/coupon_head',{url:'widget://html/my/collection.html',name:'我的收藏',islogin:true})">
            <span id="aui-like" class="aui-iconfont aui-icon-like aui-bg-737373" style="color:#fff;width:28px;height:28px;line-height:28px;border-radius:50%;-webkit-border-radius:50%;border:1px solid #666"></span>
        </a>
    </header>
    <section id="gooddetail">
    </section>
    <div class="aui-clearfix"></div>
    <section class="aui-content " id="tuijian">
        <div class="aui-iconfont aui-icon-like aui-text-color-CD2626 aui-font-size-16 aui-margin-auto aui-padded-t-10 aui-text-center">猜你喜欢</div>
        <div id="div_goods_list">
        </div>
    </section>
    <footer class="aui-bar aui-bar-tab" id="footer">
        <div class="aui-bar-tab-item" tapmode style="width: 3rem;" onclick="addMyLoveGoods()">
            <i class="aui-iconfont aui-icon-correct aui-text-warning"></i>
            <div class="aui-bar-tab-label aui-text-warning">收藏</div>
        </div>
        <div id="share_money" class="aui-bar-tab-item aui-bg-tag-quan aui-text-white" tapmode style="width: auto;" onclick="getShareGoodsPic()">分享赚</div>
        <div id="buy_money" class="aui-bar-tab-item aui-bg-tag-money aui-text-white" tapmode style="width: auto;" onclick="opencoupon()">自买省</div>
    </footer>
    <script id="gooddetailtmpl" type="text/x-dot-template">
        <div class="swiper-container">
            <div class="swiper-wrapper">{{for (var i=0;i
                <(it.picurls).length;i++) { }} <div class="swiper-slide"><img class="bgimg" onerror="this.src='../image/load-img.png'" src="{{=it.picurls[i]}}" height="{{!(api.winHeight/2)}}px" width="100%" /></div>
            {{ } }}
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        </div>
        <div style="margin:0 5px">
            <div class="aui-ellipsis-2 aui-font-size-14 aui-margin-t-5">{{? pageParam.source_type=="jd"}}<label class="jd_font_style">京东</label>{{?? pageParam.source_type=="pdd"}}<label class="pdd_font_style">拼多多</label>{{?? pageParam.source_type=="tb" && pageParam.user_type==0}}<label class="tb_font_style">淘宝</label>{{??}}
                <label class="tm_font_style">天猫</label>{{?}}{{=it.goods_name}}</div>
            <div class="aui-flex-col aui-flex-middle">
                <div class="aui-flex-item-6">
                    <span class="aui-text-color-CD2626"><label class="aui-font-size-14">￥</label>{{=it.price_after}}<del class="aui-font-size-12 aui-text-dark" style="color:#757575">￥{{=(it.price_after*1+it.discount*1).toFixed(2)}}</del></span>
                </div>
                <div class="aui-flex-item-6">
                    <span class="aui-text-white aui-font-size-12 aui-margin-r-5 aui-label aui-bg-tag-money aui-pull-right">{{?pageParam.source_type=='pdd'}}{{=it.sales}}{{??}}{{=changeW(it.sales)}}{{?}}人购买</span>
                </div>
            </div>
        </div>
        <div id="coupon" tapmode onclick="opencoupon()">
            <div class="aui-content" style="padding:5px 15px;">
                <div class="coupon-bg-{{? it.discount=='0' || it.discount=='undefined'}}no{{??}}yes{{?}}">
                    {{? it.discount=='0' || it.discount=='undefined'}}
                    <div class="aui-coupon">返现金{{=parseFloat(it.commission).toFixed(2)}}元</div>
                    <div class="aui-time">使用期限:{{=it.start_time}}-{{=it.end_time}}</div>
                    {{??}}
                    <div class="aui-coupon">{{=parseInt(it.discount)}}元优惠券</div>
                    <div class="aui-time">使用期限:{{=it.start_time}}-{{=it.end_time}}</div>
                    {{?}}
                </div>
                {{? it.goods_desc }}
                <p class="aui-font-size-12 aui-margin-t-10"><label class="{{=pageParam.source_type}}_font_style">推荐理由</label>{{=it.goods_desc}}</p>
                {{??}}
                <p class="aui-font-size-12 aui-margin-t-10"><label class="{{=pageParam.source_type}}_font_style">推荐理由</label>{{=it.goods_name}}</p>
                {{?}}
            </div>
        </div>
        <!-- 店铺信息 -->
        {{?it.shopid}}
        <div class="aui-flex-col aui-border-t-5px aui-padded-5">
            <div class="aui-flex-col aui-flex-item-7 aui-flex-center aui-flex-middle">
                <div class="aui-flex-item-5 aui-flex-center">
                    {{?pageParam.source_type=='tb'}}
                    <img src="../image/icon_{{? it.user_type==1}}tm{{??}}tb{{?}}.png" class="aui-img-round" style="width:60px;height:60px"> {{??}}
                    <img src="../image/icon_{{=pageParam.source_type}}.png" class="aui-img-round" style="width:60px;height:60px"> {{?}}
                </div>
                <div class="aui-flex-row aui-flex-item-7 aui-flex-left aui-flex-middle">
                    <div class="aui-font-size-12">{{=it.shopname}}</div>
                    <div class="shoptype">
                        {{? pageParam.source_type=="jd"}}<label class="jd_font_style">京东</label>{{?? pageParam.source_type=="pdd"}}<label class="pdd_font_style">拼多多</label>{{?? pageParam.source_type=="tb" && pageParam.user_type==0}}<label class="tb_font_style">淘宝</label>{{??}}
                        <label class="tm_font_style">天猫</label>{{?}}
                    </div>
                </div>
            </div>
            <div class="aui-flex-row aui-flex-item-5 aui-flex-center aui-flex-middle">
                <div class="shopinfo" tapmode onclick="goInShop({{=it.shopid}});">
                    进店看看
                </div>
            </div>
        </div>
        {{?}}
        <div class="goodpics" id="goodpics">
            <div class="aui-text-center aui-margin-t-10 aui-margin-b-10" {{? pageParam.source_type=='tb' }}tapmode onclick="getTaoBaoDetail({{=it.goods_id}},'gooddetail_pic');" {{?}}><b id="tabtxt">{{?pageParam.source_type=='tb'}}点击查看完整图文详情{{??}}图文详情{{?}}</b></div>
            <div class="gooddetail_pic">
                {{for (var i=0;i
                <(it.picurls).length;i++) { }} <img src="{{=it.picurls[i]}}" width="100%" class="bgimg" onerror="this.src='../image/load-img.png'" /> {{ } }}
            </div>
        </div>
    </script>
    <script id="tmpl_goods_list" type="text/x-dot-template">
        {{~it:vo:index}}
        <div class="aui-flex-col aui-flex-center aui-flex-middle aui-margin-5 aui-border-radius" style="background-color:#fff;border:1px solid #fff;box-shadow: 0 0 5px #ddd;" tapmode {{? pageParam.source_type=='jd' }}onclick="openWinto('pdd_jd_detail_win','widget://html/good_pdd_jd_detail_win',{source_type:'{{=pageParam.source_type}}',goods_id:'{{=vo.goods_id}}',picurl:'{{=vo.picurl}}',picurls:'{{=vo.picurls}}',goods_name:'{{=vo.goods_name}}',sales:'{{=vo.sales}}',price:'{{=vo.price}}',price_pg:'{{=vo.price_pg}}',commission:'{{=vo.commission}}',price_after:'{{=vo.price_after}}',discount:'{{=vo.discount}}',start_time:'{{=vo.start_time}}',end_time:'{{=vo.end_time}}',pf_cid:'{{=vo.pf_cid1}}',couponurl:'{{=vo.couponurl}}',shopname:'{{=vo.shopname}}',shopid:'{{=vo.shopid}}',user_type:'{{=vo.user_type}}'})"
            {{??}}onclick="openWinto('pdd_jd_detail_win','widget://html/good_pdd_jd_detail_win',{source_type:'{{=pageParam.source_type}}',goods_id:'{{=vo.goods_id}}',picurl:'{{=vo.picurl}}',picurls:'{{=vo.picurls}}',goods_name:'{{=vo.goods_name}}',sales:'{{=vo.sales}}',price:'{{=vo.price}}',price_pg:'{{=vo.price_pg}}',commission:'{{=vo.commission}}',price_after:'{{=vo.price_after}}',discount:'{{=vo.discount}}',start_time:'{{=vo.start_time}}',end_time:'{{=vo.end_time}}',pf_cid:'{{=vo.pf_cid}}',shopname:'{{=vo.shopname}}',shopid:'{{=vo.shopid}}',user_type:'{{=vo.user_type}}'})"
            {{?}}>
            <div class="aui-flex-item-4 aui-flex-middle aui-padded-5">
                <img class="aui-border-radius" data-echo="{{=vo.picurl}}" src="../image/load-img.png" onerror="this.src='../image/load-img.png'" />
            </div>
            <div class="aui-flex-row aui-flex-middle aui-flex-item-8 aui-padded-0">
                <div class="itemtitle aui-ellipsis-1">{{? pageParam.source_type=='jd'}}<label class="jd_font_style">京东{{?? pageParam.source_type=='pdd'}}<label class="pdd_font_style">拼多多{{?? pageParam.source_type=='tb' && vo.user_type=='0'}}<label class="tb_font_style">淘宝{{??}}<label class="tm_font_style">天猫{{?}}</label>{{=vo.goods_short_name}}</div>
                <div class="aui-flex-col aui-flex-center aui-flex-middle">
                    <div class="aui-flex-item-6"><label class="aui-label aui-bg-tag-quan aui-quan"><i>券{{=vo.discount}}元</i></label></div>
                    <div class="aui-flex-item-6"><label class="aui-font-size-18 aui-text-color-CD2626">￥{{=vo.price_after}}</label><del class="aui-font-size-10 aui-text-color-ddd">{{=(vo.price_after*1+vo.discount*1).toFixed(2)}}</del></div>
                </div>
                <div class="aui-flex-col aui-flex-center aui-flex-middle">
                    <div class="aui-flex-item-6"><label class="aui-label aui-label-danger aui-bg-tag-money">预估赚{{=vo.commission}}元</label></div>
                    <div class="aui-flex-item-6"><label class="aui-font-size-12 aui-text-color-757575">{{?pageParam.source_type=='pdd'}}{{=vo.sales}}{{??}}{{=changeW(vo.sales)}}{{?}}人购买</label></div>
                </div>
            </div>
        </div>
        {{~}}
    </script>

</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/swiper.min.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/echo.min.js"></script>
<script type="text/javascript" src="../script/utf.js"></script>
<script type="text/javascript" src="../script/phpSerializer.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        window.onscroll = function() {
            var toph = document.documentElement.scrollTop || document.body.scrollTop;
            var scrollTop = $api.byId('goodpics').offsetTop - toph;
            var tuijianTop = $api.byId('div_goods_list').offsetTop - toph;
            if (toph > 1) {
                api.setStatusBarStyle({
                    style: 'dark'
                });
                $api.css($api.byId('aui-header'), 'color:#333 !important;background-color:#FFF;opacity:' + toph * 0.01);
                $api.css($api.byId('aui-title'), 'color:#333 !important;display:block;opacity:' + toph * 0.01);
                $api.css($api.byId('aui-like'), 'display:none');
                $api.css($api.byId('aui-icon-left'), 'color:#333;background-color:rgba(0,0,0,0.0);border:none');
            } else {
                api.setStatusBarStyle({
                    style: 'light'
                });
                $api.css($api.byId('aui-header'), 'background-color:rgba(0,0,0,0.0);opacity:1');
                $api.css($api.byId('aui-title'), 'display:none');
                $api.css($api.byId('aui-like'), 'display:block');
                $api.css($api.byId('aui-icon-left'), 'color:#fff;background-color:#737373;width:28px;height:28px;border-radius:50%;-webkit-border-radius:50%;border:1px solid #666');
            }
            if (scrollTop < 100) {
                $api.removeCls($api.dom($api.byId('aui-title'), ".active"), 'active');
                $api.addCls($api.byId("xq"), 'active');
            } else if (scrollTop > 100) {
                $api.removeCls($api.dom($api.byId('aui-title'), ".active"), 'active');
                $api.addCls($api.byId("sp"), 'active');
            }
            if (tuijianTop < 100) {
                $api.removeCls($api.dom($api.byId('aui-title'), ".active"), 'active');
                $api.addCls($api.byId("tj"), 'active');
            }
        }
    })
    var pageParam, pageParamData;
    var userinfo = {};
    var appSetInfo;
    var s_click_url;
    var gooditem;
    apiready = function() {
        api.parseTapmode();
        echo.init({
            offset: 0,
            throttle: 250,
            unload: false,
        });
        var header = $api.byId('aui-header');
        $api.fixStatusBar(header);
        var headerPos = $api.offset(header);
        var body_h = $api.offset($api.dom('body')).h;
        var footerH = $api.offset($api.byId('footer')).h;
        pageParam = api.pageParam;
        userinfo = isLoginOr();
        if (pageParam.data) {
            pageParam = pageParam.data;
        }
        Object.assign(sorts_data, pageParam);
        getLike();
        gooditem = pageParam;
        if (sorts_data.picurls) {
            if (typeof(sorts_data.picurls) == 'string') {
                sorts_data.picurls = sorts_data.picurls.toString().split(',');
            }

            var da = new Date(sorts_data.start_time * 1000);
            var en = new Date(sorts_data.end_time * 1000);
            sorts_data.start_time = da.getFullYear() + '.' + parseInt(da.getMonth() + 1) + '.' + da.getDate();
            sorts_data.end_time = en.getFullYear() + '.' + parseInt(en.getMonth() + 1) + '.' + en.getDate();
            if (userinfo) { //未登录100%否则就按比列
                sorts_data.commission = (sorts_data.commission * userinfo.yjrate * 0.01).toFixed(2);
            }
            sorts_data.commission = parseFloat(sorts_data.commission).toFixed(2);
            $api.text($api.byId('share_money'), '分享赚￥' + sorts_data.commission);
            $api.text($api.byId('buy_money'), '自买省￥' + sorts_data.commission);
            setDotTmpl('gooddetailtmpl', 'gooddetail', sorts_data);
            var mySwiper = new Swiper('.swiper-container', {
                loop: true, // 循环模式选项
                autoplay: true,
                lazy: true,
                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                },
            });
            if ((sorts_data.picurls.length == 1 && sorts_data.source_type == 'pdd') || sorts_data.from == 'collection') {
                getGoodDetail();
            }
        } else {
            getGoodDetail();
        }

        api.addEventListener({
            name: 'keyback'
        }, function(ret, err) {
            closeWin();
        });

    };

    function closeWin() {
        api.closeWin({});
        window.setTimeout(function() {
            api.setStatusBarStyle({
                style: 'light'
            });
        }, 300);

    }


    function getGoodDetail() {
        showProgress();
        postData(_URL + sorts_data.source_type + '/goodsdetail', {
            goods_id: sorts_data.goods_id
        }, function(ret) {
            hideProgress();
            if (ret.status_code == 200) {
                pageParamData = ret.data;
                if (userinfo) { //未登录100%否则就按比列
                    ret.data.commission = ret.data.commission * userinfo.yjrate * 0.01;
                }
                ret.data.commission = parseFloat(ret.data.commission).toFixed(2);
                $api.text($api.byId('share_money'), '分享赚￥' + ret.data.commission);
                $api.text($api.byId('buy_money'), '自买省￥' + ret.data.commission);
                if (sorts_data.source_type == 'jd')
                    if (typeof(ret.data.picurls) == 'string' && sorts_data.picurls != '' && sorts_data.source_type == 'jd') {
                        ret.data.picurls = (ret.data.picurls).toString().split(',');
                    }
                if (sorts_data.source_type == 'pdd' && ret.data.picurls != '' && typeof(ret.data.picurls) == 'string' && ret.data.picurls.substring(0, 4) != 'http') {
                    var count = 1;
                    while (typeof ret.data.picurls == 'string' && count < 10) {
                        ret.data.picurls = unserialize(ret.data.picurls);
                        count++;
                    }
                }
                if ($api.isArray(ret.data.picurls) === false) {
                    ret.data.picurls = ['../image/load-img.png'];
                }
                //  console.log(JSON.stringify((ret.data.picurls)));
                var da = new Date(ret.data.start_time * 1000);
                var en = new Date(ret.data.end_time * 1000);
                ret.data.start_time = da.getFullYear() + '.' + parseInt(da.getMonth() + 1) + '.' + da.getDate();
                ret.data.end_time = en.getFullYear() + '.' + parseInt(en.getMonth() + 1) + '.' + en.getDate();
                if (sorts_data.source_type == 'tb') {
                    sorts_data.coupon_id = ret.data.coupon_id;
                }
                setDotTmpl('gooddetailtmpl', 'gooddetail', ret.data);
                var mySwiper = new Swiper('.swiper-container', {
                    loop: true, // 循环模式选项
                    autoplay: true,
                    lazy: true,
                    // 如果需要分页器
                    pagination: {
                        el: '.swiper-pagination',
                    },
                });
            } else {
                showToast('商品已下架~');
            }
        });
    }

    function getLike() {
        sorts_data.cat = sorts_data.cat_id = sorts_data.cid;
        getGoodsList(sorts_data.source_type, sorts_data)
    }

    function goto(where) {
        document.getElementById(where).scrollIntoView();
    }

    function opencoupon() {
        if (userinfo = isLogin()) {
            showProgress();
            getJdPddUrl({
                goods_id: pageParam.goods_id,
                couponurl: encodeURI(pageParam.couponurl),
                type: 1,
                apiname: pageParam.source_type + '/getunionurl'
            }, function(ret) {
                hideProgress();
                console.log(JSON.stringify(ret));
                if (ret.data) {
                    if ($api.getStorage(pageParam.source_type + 'isinstall') == 'true') {
                        openAppUrl(pageParam.source_type, ret.data)
                        return;
                    } else {
                        openWinto("taobaogoods_win", "common_head", {
                            'name': '粉丝福利购',
                            'url': ret.data
                        });
                    }
                }
            })
        } else {
            openWinto('login_win', 'widget://html/my/login');
        }
    }

    function addMyLoveGoods() {
        var _user = isLogin();
        if (_user) {
            showProgress();
            if (!pageParamData) {
                pageParamData = pageParam;
            }
            postDataLogin('addMyLoveGoods', {
                goods_id: pageParamData.goods_id,
                goods_name: pageParamData.goods_name,
                goods_price: pageParamData.price,
                goods_endprice: pageParamData.price_after,
                goods_couponmoney: pageParamData.discount,
                goods_sales: pageParamData.sales,
                goods_pic: pageParamData.picurl,
                source_type: pageParam.source_type
            }, function(ret) {
                if (ret) {
                    showToast(ret.msg);
                }
            })
        }

    }


    //生成分享图片
    function getShareGoodsPic() {
        var _user = isLogin();
        if (_user) {
            showProgress('图片生成中...');
            getJdPddUrl({
                goods_id: pageParam.goods_id,
                couponurl: encodeURI(pageParam.couponurl),
                type: 1,
                apiname: pageParam.source_type + '/getunionurl'
            }, function(ret) {
                hideProgress();
                if (ret.data) {
                    gooditem.s_click_url = pageParam.source_type == 'pdd' ? ret.shareurl : ret.data;
                    openWinto('share_good_win', 'widget://html/coupon_head', {
                        name: '商品分享',
                        url: 'widget://html/jdpdd_share_good.html',
                        gooditem: gooditem
                    });
                }
            })
        }

    }

    function goInShop(shopid) {
        var shopurl;
        switch (pageParam.source_type) {
            case 'tb':
                shopurl = 'http://store.taobao.com/shop/view_shop.htm?user_number_id=' + shopid;
                openWinto('web_view_win', 'widget://html/web_view_head', {
                    url: shopurl
                });
                break;
            case 'jd':
                shopurl = 'https://shop.m.jd.com/?shopId=' + shopid;
                getJdPddUrl({
                    type: 2,
                    goods_id: shopid,
                }, function(ret) {
                    openWinto('web_view_win', 'widget://html/web_view_head', {
                        url: ret.data
                    });
                });
                break;
            case 'pdd':
                shopurl = 'http://mobile.yangkeduo.com/mall_page.html?mall_id=' + shopid;
                getJdPddUrl({
                    mall_id: shopid,
                    apiname: 'pdd/unionurlmall'
                }, function(ret) {
                    openWinto('web_view_win', 'widget://html/web_view_head', {
                        url: ret.data
                    });
                });
                break;
        }
    }
</script>

</html>
